<script setup>
import {ref} from "vue";
import router from "@/router/index.js";

const person = ref({
  name: '一叶之秋',
  password: '123456',
  sex: '男',
  age: '18',
  produce: '一叶之秋是上一届24点游戏冠军'
})
</script>

<template>
  <el-row class="person">
    <el-col class="left" :span="12">

    </el-col>
    <el-col class="right" :span="12">
      <el-button style="margin: 10px 0 0 10px;" @click="router.back()">返回</el-button>
      <el-card style="max-width: 480px" class="card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <p class="text item">账号:{{ person.name }}</p>
        <p class="text item">密码:{{ person.password }}</p>
        <p class="text item">性别:{{ person.sex }}</p>
        <p class="text item">年龄:{{ person.age }}</p>
        <p class="text item">介绍:{{ person.produce }}</p>
        <template #footer>游戏快乐</template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.person {

}

.left {
  height: 100vh;
  background: url("../assets/my.jpeg") no-repeat center center/cover;
}

.right {
  height: 100vh;
  background: #f5f5f5;
}

.right .card{
  margin:200px auto;
}
</style>